<template>
  <div>
    <el-form v-if="probForm.probId!=null">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
              <el-form-item>
              <el-input
                v-model="inviteForm.inviteeUserEmail"
                placeholder="输入被邀请候选人的email"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
              <el-form-item class="btns">
              <el-button style="margin-left: 10px" type="success" @click="invite">邀请</el-button>
              </el-form-item>
          </div
        ></el-col>
      
      </el-row>
    </el-form>

    <h2>{{ probForm.probTitle }}</h2>
    <h3 v-html="probForm.probContent"></h3>

    <el-form>
      <el-form-item class="btns">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
      <el-form-item>
        标题
        <el-input
          v-model="probForm.probTitle"
          placeholder="输入题目标题"
        ></el-input>
      </el-form-item>
    </el-form>

    

    <!-- <h1> {{$route.params.id}} </h1> -->

    <quill-editor
      ref="myTextEditor"
      v-model="probForm.probContent"
      :options="editorOption"
      style="height: 600px"
    ></quill-editor>
  </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
  data() {
    return {
      // content: '',
      editorOption: {
        placeholder: "编辑题面内容",
      },
      probForm: {
        probId: null,
        probTitle: "",
        probContent: "",
      },
      inviteForm: {
        inviteeUserEmail: null,
      }
    };
  },
  components: {
    quillEditor,
  },
  watch: {
    $route: "updateForm",
  },
  created() {
    this.updateForm();
  },
  methods: {
    submit() {
      const InspireCloud = require("@byteinspire/js-sdk");
      const myServiceId = "qcqsjd";
      const fnName = "prob_create";

      // 创建轻服务实例
      const inspirecloud = new InspireCloud({
        serviceId: myServiceId,
      });

      // 调用轻服务函数
      inspirecloud
        .run(
          fnName,
          Object.assign(
            { token: window.sessionStorage.getItem("token") },
            this.probForm
          )
        )
        .then((data) => {
          console.log(data);
          if (data.message) {
            this.$message.error(data.message);
          } else this.$message.success('保存成功')
        })
        .catch((error) => {
          // 处理异常
        });
    },
    updateForm() {
      if (this.$route.params.id != undefined) {
        this.probForm.probId = parseInt(this.$route.params.id);
        const InspireCloud = require("@byteinspire/js-sdk");
        const myServiceId = "qcqsjd";
        const fnName = "prob_require_by_prob_id";

        // 创建轻服务实例
        const inspirecloud = new InspireCloud({
          serviceId: myServiceId,
        });

        // 调用轻服务函数
        inspirecloud
          .run(
            fnName,
            Object.assign(
              { token: window.sessionStorage.getItem("token") },
              this.probForm
            )
          )
          .then((data) => {
            console.log(data);
            if (data.message) {
              this.$message.error(data.message);
            } else {
              this.probForm = data;
            }
          })
          .catch((error) => {
            // 处理异常
          });
      }
    },
    invite() {
      
      const InspireCloud = require("@byteinspire/js-sdk");
      const myServiceId = "qcqsjd";
      const fnName = "invite_create";

      // 创建轻服务实例
      const inspirecloud = new InspireCloud({
        serviceId: myServiceId,
      });

      console.log({
            token: window.sessionStorage.getItem("token"),
            inviteeUserEmail: this.inviteForm.inviteeUserEmail,
            probId: this.$route.params.id
          })
      // 调用轻服务函数
      inspirecloud
        .run(
          fnName,
          {
            token: window.sessionStorage.getItem("token"),
            inviteeUserEmail: this.inviteForm.inviteeUserEmail,
            probId: this.$route.params.id
          }
        )
        .then((data) => {
          console.log(data);
          if (data.message) {
            this.$message.error(data.message);
          } else this.$message.success("邀请成功");
        })
        .catch((error) => {
          // 处理异常
        });
    },
  },
};
</script>